<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://doubandev.intra.douban.com:9710/css/douban.css" type="text/css" media="screen" />
<link href="http://doubandev.intra.douban.com:9710/css/separation/_all.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="css/reader.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
<link href="http://doubandev.intra.douban.com:9710/css/ui/dialog.css" type="text/css" rel="stylesheet"> 
<link href="http://doubandev.intra.douban.com:9710/css/lib/jquery.snippet.css" type="text/css" rel="stylesheet"> 
<link href="css/jquery-ui-1.8.14.custom.css" type="text/css" rel="stylesheet"> 
<link href="css/jquery.cropzoom.css" type="text/css" rel="stylesheet">
<link href="css/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/douban.js"></script> 
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/separation/_all.js"></script>     
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/imgsel.js"></script>
</head>
<body>
<div id="doc" style="display:none; margin-left:-200%;">
    <div id="sidebar">
        <div class="zoom"><a href="#big">大</a>  <a href="#small" class="on">小</a></div>
    </div>
    <div id="container" class="small">
        <div id="readerbox" class="vertical"><!--horizontal-->
        
        </div>
    </div>
</div>
<script id="db-templ-tools" type="text/template">
<div class="tools tools-v" id="tools">
	<div class="info"></div>
	<div class="up"><div class="arrow"></div></div>
	<div class="down"><div class="arrow"></div></div>
	<div class="currpn">1</div>
	<div class="keycode"></div>
	<div id="infotext">
		<ul>
			<li>文章：夏威夷的冬天</li>
			<li>作者：毛毛</li>
			<li>评分：五星</li>
		</ul>
	</div>
	<div id="keytips"></div>
</div>
</script>
<div id="popinfo"></div>
<div id="foo"></div>
<div id="eidtordoc">
<div id="eidtor">
<form method="post" action="submit.php">
	<div class="frm-item">
		<label class="label">标题：</label><input type="text" class="text" name="art_title">
	</div>
	<div class="frm-item">
		<label class="label">类别：</label><select name="aa"><option value="1">文学</option><option value="1">诗歌</option><option value="1">科技</option></select>
	</div>
	<div class="frm-item">
		<label class="label">创作/译作：</label><input type="radio" name="art_type"> 创作 <input type="radio" name="art_type"> 译作
	</div>
	<div class="frm-item">
		<label class="label">原作者：</label><input type="text" class="text" name="art_author">
	</div>
	<div class="frm-item">
		<label><input type="checkbox" name="art_table"> 以章节标题创建目录</label>
	</div>
	<div class="frm-item editor">
		<label>文章内容：</label>
		<textarea class="art_content" name="art_content"></textarea>
	</div>
	<div class="frm-item btn">
		<div class="bn-flat"><input class="btn-submit" type="button" value="发表"></div>
		<div class="bn-flat"><input class="btn-preview" type="button" value="预览"></div>
		<div class="bn-flat"><input class="btn-save" type="button" value="保存不发表"></div>
	</div>
</form>
</div>
</div>
<div id="btn-back" style="display:none;">返回编辑</div>
<script id="db-templ-upload" type="text/template"> 
  <div class="dlg-uploadpic">
    <form>
      <p>图片的大小不超过3M</p>
      <div class="item">
        <label>选择图片</label>
        <input id="file" type="file" name="file">
        <br>
        <br>
      </div>
      <div class="item-submit">
        <span class="bn-flat"><input type="submit" id="startup"  onclick="return false;" value="开始上传"></span>
        &nbsp;
        <span class="bn-flat"><input type="button" value="取消" class="bn-close"></span>
      </div>
    </form>
  </div>
</script> 
<script id="db-templ-croppic" type="text/template"> 
<div class="dlg-croppic" id="croppic">
	<div class="pic" id="uploadpic">
		<img src="http://localhost/greengnn/doreader/test03.png" width="300%" />
	</div>
	<div class="toolbar mod">
		<p>依照你需要的版式裁剪图片</p>
		<h2>如何裁剪</h2>
		<p>随意拖拽和拖放您的图片，在虚线框内的图片即为你编辑后生成的图片。</p>
		<ul class="select">
			<li><label><input type="radio" name="size" value="546|280" checked=""> <s class="ico-img-type ico-s1"></s> 通栏横图</label> <a href="#">示例</a></li>
			<li><label><input type="radio" name="size" value="364|280"> <s class="ico-img-type ico-s2"></s> 两栏横图</label> <a href="#">示例</a></li>
			<li><label><input type="radio" name="size" value="364|420"> <s class="ico-img-type ico-s3"></s> 两栏竖图</label> <a href="#">示例</a></li>
			<li><label><input type="radio" name="size" value="182|182"> <s class="ico-img-type ico-s4"></s> 单栏方图</label> <a href="#">示例</a></li>
			<li><label><input type="radio" name="size" value="182|420"> <s class="ico-img-type ico-s5"></s> 单栏竖图</label> <a href="#">示例</a></li>
		</ul>
		<br>
		<a id="btn-croppic" href="#" class="lnk-follow">确定</a> <a id="btn-cancel" href="#">取消</a>
		<br>
		<a id="btn-reupload" href="#">重新上传图片</a>
		<input id="x1" type="text" name="x1">
   		<input id="y1" type="text" name="y1">
   		<input id="x2" type="text" name="x2">
   		<input id="y2" type="text" name="y2">
	</div> 
	<div id="zoom"></div> 
</div> 
</script>
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/ui/dialog.js"></script> 
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/ajaxfileupload.js"></script> 
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/lib/dui.textarea.js?123.js"></script> 
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/lib/validate.js"></script> 
<script type="text/javascript" src="http://doubandev.intra.douban.com:9710/js/lib/jquery.snippet.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
<script type="text/javascript" src="js/reader.js"></script> 
<script src="js/prettify.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function(){
  //class has a_ 
  $('body').click(function(e){
    var el = $(e.target), 
      classname = el.attr('class');
      if (classname === '') {
        return;
      }
      $(classname.match(/a_(\w+)/gi)).each($.proxy(function(i, n){
        var fn = Douban[n.replace(/^a_/, 'init_')];
          if (typeof fn === 'function') {
            e.preventDefault();
            fn.call(this, e);
          }
      }, el[0]));
  });
  var errdetail = $.extend(Douban.errdetail,{
    2 : '照片太大(每张照片的大小不应超过3M)',
    10 : '不支持的图片格式',
    12 : '照片格式有误(仅支持JPG,JPEG,GIF,PNG或BMP)',
    14 : '添加图片出错'
  }),
 
  nid = '13771983',
 
  kind = '1005',
 
  TEMPL_LOADINGIMG = '<div id="loadingimg" class="thumblst pl hidden" style="min-height:50px;height:50px"><a class="rr j a_cancel_upload" href="#cancel_upload">取消</a><img src="http://img2.douban.com/pics/loading.gif"/><a name="loading"></a>正在上传图片……</div>',
 
  TEMPL_ERRORMSG = '<div id="errormsg" class="hidden message"></div>',
 
/*   TEMPL_THUMB = '<div class="thumblst"> <div class="details pl">图片名称(30字以内)<br/><textarea name="pPN_title"></textarea> <br/><br/>图片位置<br/> <a href="#delete" class="rr NJ a_remove_pic" name="rm-PN">删除</a> <label><input type="radio" name="pPN_layout" value="L" disabled="disabled" /> <span class="alignleft">左</span></label> <label><input type="radio" name="pPN_layout" value="C" disabled="disabled" checked/> <span class="aligncenter">中</span></label> <label><input type="radio" name="pPN_layout" value="R" disabled="disabled" /> <span class="alignright">右</span></label> </div><div class="thumb"><div class="pl"><图片PN></div><ul src="PT"/></div> <div class="clear"></div></div>', */
 
  uphandler,
 
  bn_upload,
 
  show_mask = function(){
  	var mask_div = '<div id="loading-mask" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;background-color:#000;"></div>';
  	$(mask_div).appendTo('body');
  },
  
  close_mask = function(){
  	$("#loading-mask").remove();
  },
  
  show_dialog = function(s, t, w) {
    return dui.Dialog({
      title: t,
      width: w || 400,
      content: s
    }).open();
  },
 
  close_dialog = function() {
    $('.dui-dialog').hide();
  },
 
  cancel_upload = function(){
    uphandler.abort();
    hide_uploading();
  },
 
  show_uploading = function(o){
    var item = o.node.parents('.frm-item'), loading = $('#loadingimg');
    if (loading.length === 0) {
      item.after(TEMPL_LOADINGIMG);
      loading = $('#loadingimg');
      loading.find('a.a_cancel_upload').click(function(e){
        e.preventDefault();
        cancel_upload();
      });
    }
    loading.show();
    bn_upload.hide();
  },
 
  hide_uploading = function(){
    $('#loadingimg').hide();
    bn_upload.show();
  },
 
  add_thumb = function(pic, o){
    o.insertTag('<图片'+pic.name+'>');
    /*
var thumbdiv = $(TEMPL_THUMB.replace(/NJ/,'j')
      .replace(/PN/g,pic.name)
      .replace(/PT/,pic.thumb)
      .replace(/(ul|UL)/,'img'));
      //replace align
*/

	var thumbdiv = '<div class="thumblst"> <div class="details pl">图片名称(30字以内)<br/><textarea name="p'+pic.name+'_title"></textarea> <br/><br/>图片位置<br/> <a href="#delete" class="rr j a_remove_pic" name="rm-'+pic.name+'">删除</a> ';
	
	var thumblayout = '';
	db(pic.type);
	switch(pic.type){
		case '546|280':
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" disabled="disabled" /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" disabled="disabled" /> <span class="alignright">右</span></label> </div>';
			break;
		case '364|280':
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" checked /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C"  disabled="disabled" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" /> <span class="alignright">右</span></label> </div>';	
			break;
		case '364|420':
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" checked /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C"  disabled="disabled" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" /> <span class="alignright">右</span></label> </div>';	
			break;
		case '182|182':
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" checked /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C"  disabled="disabled" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" /> <span class="alignright">右</span></label> </div>';	
			break;
		case '182|420':
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" checked /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C"  disabled="disabled" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" /> <span class="alignright">右</span></label> </div>';	
			break;
		default:
			thumblayout ='<label><input type="radio" name="p'+pic.name+'_layout" value="L" checked /> <span class="alignleft">左</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="C"  disabled="disabled" /> <span class="aligncenter">中</span></label> <label><input type="radio" name="p'+pic.name+'_layout" value="R" /> <span class="alignright">右</span></label> </div>';	
			break;
		
	};
	var thumbdiv = thumbdiv + thumblayout;
	var thumbdiv = thumbdiv + '<div class="thumb"><div class="pl"><图片'+pic.name+'></div><ul src="'+pic.thumb+'"/></div> <div class="clear"></div></div>';
	
	alert(thumblayout);
    $('#loadingimg').after(thumbdiv);
  },
  show_error = function(e, o){
    var s = '', err = $('#errormsg');
    if(typeof e == 'object'){
      s = '上传过程中出现问题('+e.name+'),请稍后再试';
    } else s = e;
    if(s == 'timeout'){
      s = '图片上传超时，可能系统正忙，请稍后再试。';
    }
 
    if (err.length === 0) {
      o.node.parents('.frm-item').after(TEMPL_ERRORMSG);
      err = $('#errormsg');
    }
 
    err.show().html(s);
  },
  handleUploadPic = function(o){
    if (!bn_upload) {
      bn_upload = o.toolbar.find('a[href$=upload_pic]');
    }
 
    show_dialog($('#db-templ-upload').html(), '添加图片').node.find('.bn-close').click(close_dialog);
 
    $('#startup').click(function(e){
      $(this).attr('disabled', 'true');
      uphandler = $.ajaxFileUpload({
        url: o.config.uploadImageURL,
        global:true,
        secureuri:false,
        fileElementId:'file',
        dataType:'json',
        timeout:120000,
        allowType:'jpg|png|bmp|gif|jpeg',
        extra:{nid: nid, kind: kind, needtype: 'json', ck: get_cookie('ck') },
        success: function(data, status){
          hide_uploading();
          /*
if(typeof(data.status)!= 'undefined'){
            if(data.status!= '0'){
              show_error(errdetail[parseInt(data.status)], o);
            } else {
              add_thumb({thumb:data.src,name:data.seqid}, o);
            }
          }else{
            show_error('无法得到服务器返回', o);
          }
*/		  	
			var addimg = function(data){
				alert('x='+data.x+'&y='+data.y+'&z='+data.z+'&w='+data.w+'&h='+data.h);
					
				var args = {
					src: data.src,
					seqid : 0,
					type : data.w + '|' + data.h
				};
				add_thumb({thumb:args.src,name:args.seqid,type:args.type}, o);
				db(args);
			};
          	data.src = 'http://localhost/greengnn/doreader/test01.png';
          	data.seqid = 1;
			
			//show_mask();
  			show_dialog($('#db-templ-croppic').html(), '裁剪图片',860).node.find('.bn-close').click(close_dialog);
  			$('.dui-dialog').css({'position':'absolute'});
  			$('#croppic').pictureCrop({img:data.src,imgw:600,imgh:400,callback:addimg});

        },
        error:function(data,status,e){
          hide_uploading();
          show_error(e, o);
        },
        begin: function(e){
          if(e!=''){
            $('#startup').attr('disabled',0);
            alert(errdetail[e]);
          }else{
            close_dialog();
            show_uploading(o);
            $('#errormsg').hide();
            location.href = '#loading';
          }
        }
      });
    });
  };
  
  $('.editor').richTextarea({
    enableBold: false,
    enableLink: false,
    enableSection: true,
    enableSup: true,
    enableQuote: false,
    uploadImageURL: 'http://localhost/greengnn/doreader/upload_photo.php',
    TEMPL_ITEM_UPLOADIMG: '<a href="#upload_pic">插入图片</a>',
    callback: function(type, o){
      if (type === 'upload_pic') {
        handleUploadPic(o);
      }
    }
  });

  Douban.init_remove_pic = function(e){
    var lnk = $(this), cont = lnk.parents('form').find('.editor textarea')[0];
    if(confirm('真的要删除？')){
      lnk.parents('.thumblst').fadeOut('slow',function(){$(this).remove()});
      cont.value = cont.value.replace(eval('/<图片' + lnk.attr('name').split('-')[1] + '>/g'),'');
    }
  };  
  
  window.onbeforeunload = confirmExit;
  function confirmExit(){
    var iart = $('input[name=art_content]').val();
    if ( iart ) {
        return "你没有保存，确定要放弃编辑么？";
    }
  };
  $('#doc').bind({
  	show : function(e){
  		$('#doc').show();
  		$('#doc').animate({'margin-left':'0%'},900);
  		$('#btn-back').show();
  		$('#eidtor').hide();
  	},
  	hide : function(e){
  		$('#doc').animate({'margin-left':'-200%'},900,function(){
  			$('#doc').hide();
  		});
  		$('#btn-back').hide();
  		$('#eidtor').show();
  	}
  });
  $('.btn-preview').click(function(){
  	//var html = $('input[name=art_content]').val();
	var d = new Date();
	var _url = 'data.php?d=' + d.getTime();
	var html = $.ajax({
	    url: _url,
	    async: false
	}).responseText;
  	$("#doc").trigger("show");
  	DoReaderPreview(html);
  	prettyPrint();
  });
  $('#btn-back').click(function(){
  	$("#doc").trigger("hide");
  });
  
  (function($){
  	var cropcfg = {
		width:600,
        height:520,
        enableRotation: false,
        enableZoom: true,
        expose:{
            zoomElement: '#zoom'
        },
        selector:{
          w:546,
          h:280,
          x:10,
          y:10,
          borderColor:'white',
          showPositionsOnDrag:false,
          showDimetionsOnDrag:false,
          startWithOverlay: true,
          hideOverlayOnDragAndResize: false        
        },
        image:{
            source:'test01.png',
            width:546,
            height:338,
            minZoom:10,
			maxZoom:150,
            onImageDrag: function(o){
            	$('#x1').val(o.style.left.replace('px',''));
            	$('#y1').val(o.style.top.replace('px',''));
            },
            onZoom: function(o,p){
            	$('#x1').val(p.posX);
            	$('#y1').val(p.posY);
            	$('#x2').val(p.w);
            	$('#y2').val(p.h);
            }
        }
    };
  	var _config = {
  		img:null,
  		imgw:null,
  		imgh:null,
  		callback : function(){}
  	};
  	var cropzppm_ = function(el,cfg){
  		return el.cropzoom(cfg);
  	};
  	var iserr_ = function(x1a,x2a,y1a,y2a,x1b,x2b,y1b,y2b){
  		var arg = [];
  		for(var i = 0,len = arguments.length;i<len;i++){
  			arg.push(arguments[i]);
  		}
  		alert(arg.join('&'));
  		var res = false;
  		if(x1b < x1a && x2b > x2a && y1b < y1a && y2b > y2a){
  			res = true;
  		}
  		return res;
  	};
  	var _pictureCrop = function(container,cfg){
  		this.root = container;
  		this.crop = $('#croppic');
     	this.config = cfg;
		this.pic = $('#uploadpic');
  		this.imgRet = null;
     	this.init();
  	};
  	_pictureCrop.prototype = {
  		init : function(){
  			var that = this;
  			cropcfg.image.source = that.config.img;
            cropcfg.image.width = that.config.imgw;
            cropcfg.image.height = that.config.imgh;
            
		    var cropzoom = cropzppm_(this.pic,cropcfg);
			
			 $('#x1').val('0');
			 $('#y1').val('0');
			 $('#x2').val(cropcfg.image.width);
			 $('#y2').val(cropcfg.image.height);
			 
/*
			cropzoom.send('resize_and_crop.php', 'POST', {}, function(imgRet) {
		               that.imgRet = imgRet;
		               that.callback();
		          });
		     $("#restore").click(function(){
				  $("#generated").attr("src", "tmp/head.gif");
				  cropzoom.restore();					  
			 });
*/
	        this._bindEvent();
       },
       callback : function(data){
       		return this.config.callback(data);
       },
       _bindEvent : function(){
       		var that = this;
			$(".toolbar ul input", that.root).click(function() {
  				var s = $(".toolbar :checked", that.root).val();
  				var cfgData = s.split('|');
  				cropcfg.selector.w = parseInt(cfgData[0]);
  				cropcfg.selector.h = parseInt(cfgData[1]);
  				
		    	var cropzoom = cropzppm_(that.pic,cropcfg);
  				
   			});	
   			$("#btn-croppic").click(function(){
			 	var posX = parseInt($('#x1').val()),
			 		posY = parseInt($('#y1').val()),
			 		currW = parseInt($('#x2').val()),
			 		currH = parseInt($('#y2').val());
			 	
			 	var x1a = cropcfg.selector.x,
			 		x2a = cropcfg.selector.x + cropcfg.selector.w,
			 		y1a = cropcfg.selector.y,
			 		y2a = cropcfg.selector.x + cropcfg.selector.h,
			 		x1b = posX,
			 		x2b = posX + currW,
			 		y1b = posY,
			 		y2b = posY + currH;
			 	var iserr = iserr_(x1a,x2a,y1a,y2a,x1b,x2b,y1b,y2b);
			 	
			 	var zoomed = currW / parseInt(cropcfg.image.width);
			 	if(!iserr){
			 		alert('img zoom pos err');
			 	}else{
				 	var cldb = {
				 		x : x1a - x1b,
				 		y : y1a - y1b,
				 		z : zoomed,
				 		src : cropcfg.image.source,
				 		w : cropcfg.selector.w,
				 		h : cropcfg.selector.h
				 	};
				 	that.callback(cldb);
				 	$('.dui-dialog').hide();
				 	$("#loading-mask").remove();
			 	}  
			 });
       }
  	};
  	$.fn.pictureCrop = function(config){
  		var cfg = config || {}, k;
     	for (k in _config) {
       		if(_config.hasOwnProperty(k)){
        		if (typeof cfg[k] === 'undefined') {
           			cfg[k] = _config[k];
         		}
       		}
     	}
     	return new _pictureCrop(this, cfg);

  	};
  })(jQuery);
/*
  show_dialog($('#db-templ-croppic').html(), '添加图片',900).node.find('.bn-close').click(close_dialog);
  $('.dui-dialog').css({'position':'absolute'});
  $('#croppic').pictureCrop();
*/
});
</script>
</body>
</html>
